/* eslint-disable import/order */
import ReactQuill, { type ReactQuillProps } from 'react-quill';
import { StyledEditor } from './styles';
import Toolbar, { formats } from './toolbar';
import './style.scss';

interface Props extends ReactQuillProps {
  sample?: boolean;
  isShowToolbar?: boolean;
  maxHeight?: number /* 最大高度配置 */;
}
export default function Editor({
  id = 'slash-quill',
  sample = false,
  isShowToolbar = true,
  placeholder = 'Write something...',
  modules,
  style,
  maxHeight = 300,
  ...other
}: Props) {
  const baseModules = {
    toolbar: {
      container: `#${id}`,
    },
    history: {
      delay: 500,
      maxStack: 100,
      userOnly: true,
    },
    // syntax: true, // 禁用语法高亮功能以避免 highlight.js 依赖
    clipboard: {
      matchVisual: false,
    },
  };
  return (
    <StyledEditor>
      {isShowToolbar && <Toolbar id={id} isSimple={sample} />}
      <ReactQuill
        style={
          {
            ...style,
            '--editor-max-height': `${maxHeight}px`,
          } as React.CSSProperties
        }
        modules={modules ?? baseModules}
        formats={formats}
        {...other}
        placeholder={placeholder}
      />
    </StyledEditor>
  );
}
